<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Demuxer</title>

    <style type="text/css">
        body {
            font: 12px/1.5 Tahoma, Helvetica, Arial, "\5FAE\8F6F\96C5\9ED1", sans-serif;
        }

        div {
            outline: none;
        }

        video {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- browser import -->
    <!-- <script type="text/javascript" src="../../dist/demuxer.ts.umd.js"></script>
    <script>
        const TSDemux = Demuxer.TSDemux;
        const Events = Demuxer.Events;
    </script> 
    -->

    <script type="module">
        // ES Module import
        import { TSDemux, Events } from '../../dist/demuxer.ts.esm.js';
        // import { TSDemux, Events } from '../../dist/demuxer.all.esm.js';
        let tsUrl = './h265_aac_1_16000.ts';

        fetch(tsUrl).then((res) => {
            res.arrayBuffer().then((bytes) => {
                let demux = new TSDemux({
                    debug: true // if env is production, debug should be false or not specified.
                });

                demux.on(Events.DEMUX_DATA, (e) => {
                    console.log(e)

                    // if (e.stream_type === 15) {
                    //     console.log(e)
                    // }
                });

                demux.on(Events.DONE, (e) => {
                    // consumed & flushed all pipe buffer.
                });

                // buffer -> video bytes ArrayBuffer 
                demux.push(bytes, {
                    done: true
                });
            });
        })
    </script>
</head>

<body style="background-color: darkslategray;">

</body>

</html>